<template>
    <div class="content">
        <div class="top">
            <el-input placeholder="车位名称" v-model="form.parkname"></el-input>
            <el-input placeholder="应缴金额" v-model="form.orderpay"></el-input>
            <el-select v-model="form.orderstatus" clearable placeholder="缴费状态" style="width: 20%;margin-left: 10px">
                <el-option
                        v-for="item in orderList"
                        :key="item.value"
                        :label="item.text"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-search" @click="search" style="margin-left: 20px" class="button1">查询</el-button>
            <el-button type="success" icon="el-icon-document-copy" @click="port" class="button2">全量导出</el-button>
            <el-button type="primary" icon="el-icon-refresh-right" @click="reset" class="button3">重置</el-button>
        </div>
        <div class="list">
            <el-table
                    ref="multipleTable"
                    :data="tableData"
                    border
                    stripe
                    align="center"
                    tooltip-effect="dark"
                    :header-cell-style="{'background':'#eef1f6','color':'#1f2d3d','border-color':'#dfe6ec'}"
                    style="width: 100%;font-size: 14px;color: #1f2d3d"
                    v-loading="loading">
                <el-table-column
                        type="index"
                        label="序号"
                        align="center"
                        width="70">
                </el-table-column>
                <el-table-column
                        prop="parkname"
                        label="车位名称"
                        align="center"
                        width="220">
                </el-table-column>
                <el-table-column
                        prop="parkpay"
                        label="车位金额"
                        show-overflow-tooltip
                        width="200"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="startdate"
                        label="开始时间"
                        align="center"
                        width="240"
                        :formatter="dateFormat"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="enddate"
                        label="结束时间"
                        align="center"
                        width="240"
                        :formatter="dateFormat"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="orderpay"
                        label="应缴金额"
                        width="140"
                        :formatter="moneyFormat"
                        show-overflow-tooltip
                        align="center">
                </el-table-column>
                <el-table-column
                        v-if="this.type == 1"
                        prop="orderstatus"
                        label="缴费状态"
                        width="170"
                        :formatter="typeFormatter"
                        align="center">
                    <template slot-scope="scope">
                        <el-tooltip :content="'park status: ' + scope.row.orderstatus" placement="top">
                            <el-switch
                                    class="tableScopeSwitch"
                                    v-model="scope.row.orderstatus"
                                    disabled
                                    active-text="已缴费"
                                    inactive-text="未缴费"
                                    :active-value="1"
                                    :inactive-value="2">
                            </el-switch>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column
                        v-else
                        prop="orderstatus"
                        label="缴费状态"
                        width="170"
                        :formatter="typeFormatter"
                        align="center">
                    <template slot-scope="scope">
                        <el-tooltip :content="'park status: ' + scope.row.orderstatus" placement="top">
                            <el-switch
                                    class="tableScopeSwitch"
                                    v-model="scope.row.orderstatus"
                                    @change="handleShowStatusChangeHouse(scope.row)"
                                    active-text="已缴费"
                                    inactive-text="未缴费"
                                    :active-value="1"
                                    :inactive-value="2">
                            </el-switch>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column v-if="this.type == 1"
                                 label="操作"
                                 width="200"
                                 align="center">
                    <template slot-scope="scope">
                        <div style="display: flex;margin-left: 13px">
                            <el-button :plain="true"
                                       size="mini"
                                       style="background-color: #fff;font-size: 12px"
                                       @click="edit(scope.row, scope.$index)"
                            >通知缴费</el-button>
                            <el-button :plain="true"
                                       size="mini"
                                       style="color: #62a8ea;background-color: #fff;font-size: 12px;margin-left: 15px"
                                       @click="detail(scope.row)"
                            >缴费详情</el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column v-else
                                 label="操作"
                                 width="200"
                                 align="center">
                    <template slot-scope="scope">
                        <div style="display: flex;margin-left: 13px">
                            <el-button :plain="true"
                                       size="mini"
                                       style="background-color: #fff;font-size: 12px"
                                       @click="payCar(scope.row, scope.$index)"
                            >车位缴费</el-button>
                            <el-button :plain="true"
                                       size="mini"
                                       style="color: #62a8ea;background-color: #fff;font-size: 12px;margin-left: 15px"
                                       @click="detail(scope.row)"
                            >缴费详情</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="cur_page"
                        :page-sizes="[10, 20, 30, 40, 50]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <order-dialog ref="orderDialog"></order-dialog>
        <user-dialog ref="userDialog"></user-dialog>
    </div>
</template>

<script>
    import { export2Excel } from '@/utils/util'
    import dateFunc from '@/utils/dateFunc'
    import moment from 'moment'
    import orderDialog from "@/components/page/parking/parkPay/orderDialog";
    import userDialog from "./userDialog";
    export default {
        name: "parkOrder",
        components: {userDialog, orderDialog},
        data(){
            return{
                type: '',
                columns:[{title:'车位名称',key:'parkname'},
                    {title:'车位金额',key:'parkpay'},{title:'开始时间',key:'startdate'},{title:'结束时间',key:'enddate'},
                    {title:'应缴金额',key:'orderpay'},{title:'缴费状态',key:'orderstatus'}],
                tableData:[],
                loading: false,
                form:{
                    parkname: '',
                    orderpay: '',
                    orderstatus: ''
                },
                orderList: [
                    {
                        value: 1,
                        text: '已缴费',

                    },
                    {
                        value: 2,
                        text: '未缴费',
                    },
                ],
                total: 0,
                cur_page: 1,
                pageSize: 10,
                dialogTableVisible: false,
                dialogFormVisible: false,
            }
        },
        created(){
            this.$axiosToken({
                url: '/users/getUserByToken',
                method: 'get',
                data: {},
                success:(result=>{
                    this.type = result.type;
                })
            });
          this.getParkData()
        },
        methods:{
            // 分页导航
            handleSizeChange(val) {
                this.pageSize = val;
                this.getParkData()
            },
            handleCurrentChange(val) {
                this.cur_page = val;
                this.getParkData()
            },

            // 获取列表
            getParkData(){
                this.loading = true;
                this.$Axios({
                    url: '/parking/getParkOrder',
                    method: 'get',
                    data:{
                        parkname: this.form.parkname,
                        orderstatus: this.form.orderstatus,
                        orderpay: this.form.orderpay,
                        pageNum: this.pageSize,
                        currPage: this.cur_page - 1
                    },
                    success:(result)=>{
                        this.tableData = result.data;
                        this.total = result.total;
                        setTimeout(() => {
                            this.loading = false;
                        }, 200);
                    }
                })
            },
            // 查询
            search(){
                this.cur_page = 1;
                this.getParkData()
            },

            // 全量导出
            port(){
                this.$confirm('确定全量导出excel文件？', '提示', {
                    type: 'warning'
                }).then(()=>{
                    export2Excel(this.columns,this.tableData)
                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: '已取消全量导出',
                        duration: 2000
                    })
                })
            },
            // 重置
            reset(){
                this.form = {
                    parkname: '',
                    orderpay: '',
                    orderstatus: ''
                }
                this.search()
            },

            edit(row,index){

                this.$refs.orderDialog.actionType = 'edit';
                this.$refs.orderDialog.init(row);
                this.$refs.orderDialog.dialogTableVisible = true

            },

            detail(row){
                this.$refs.orderDialog.actionType = 'detail';
                this.$refs.orderDialog.dialogTableVisible = true;
                this.$refs.orderDialog.formData = row
            },

            // 用户车位缴费
            payCar(row,index){
                this.$refs.userDialog.dialogFormVisible = true;
                this.$refs.userDialog.form = row
            },
            // 用户缴费状态
            handleShowStatusChangeHouse(row){
                this.$confirm('确定为该车位缴费？','提示',{
                    type: 'warning'
                }).then(()=>{
                    this.$axiosToken({
                        url: '/parking/payParkOrder',
                        method: 'post',
                        data:{
                            u_id: row.id,
                            orderstatus: row.orderstatus,
                        },
                        success: (result)=>{
                            this.$message({
                                message: '缴费成功',
                                type: 'success',
                                duration: 1000
                            });
                            this.getParkData()
                        }
                    })
                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: '已取消缴费',
                    });
                    this.getParkData()
                })

            },

            // 时间格式转化
            dateFormat(row,column) {
                var date = row[column.property];
                if(date == undefined){
                    return '暂无'
                }else {
                    return moment(date).format("YYYY-MM-DD HH:mm:ss")

                }
            },
            // 状态转文字
            typeFormatter(row,column){
                const orderstatus = row.orderstatus
                if (orderstatus == 1){
                    return '已缴费'
                }else {
                    return '未缴费'
                }
            },
            // 显隐数据
            moneyFormat(row,column){
                if (row.orderpay == undefined){
                    return '暂无'
                }else {
                    return row.orderpay
                }
            }
        }
    }
</script>

<style scoped>
    .top {
        width: 100%;
        display: flex;
    }
    /deep/ .el-input__inner{
        font-size: 14px;
        height: 36px;
    }
    .el-input:nth-child(1) {
        width: 20%;
        border-radius: 4px;
    }
    .el-input:nth-child(2) {
        width: 20%;
        margin-left: 10px;
        border-radius: 4px;
    }
    .el-input:nth-child(3) {
        width: 22%;
        margin-left: 10px;
        border-radius: 4px;
    }
    .button1,.button2,.button3{
        border-radius: 4px;
        margin-left: 15px;
        color: #fff;
        font-size: 14px;
        width: 9%;
    }
    /deep/ .el-button--mini, .el-button--mini.is-round{
        padding: 6px 10px;
    }
    /deep/ .el-button--mini, .el-button--small{
        border-radius: 5px;
    }

    .list {
        margin-top: 25px;
    }
    .pagination{
        text-align: right;
        margin: 20px 0;
    }
    /deep/ .el-input.el-input--mini.el-input--suffix>.el-input__inner{
        height: 28px;
    }

</style>

<style>
    .tableScopeSwitch .el-switch__label {
        position: absolute;
        display: none;
        color: #fff;
    }
    /*打开时文字位置设置*/
    .tableScopeSwitch .el-switch__label--right {
        z-index: 1;
        right: 8px;    /*不同场景下可能不同，自行调整*/
    }
    /*关闭时文字位置设置*/
    .tableScopeSwitch .el-switch__label--left {
        z-index: 1;
        left: 8px;    /*不同场景下可能不同，自行调整*/
    }
    /*显示文字*/
    .tableScopeSwitch .el-switch__label.is-active {
        display: block;
    }
    .tableScopeSwitch.el-switch .el-switch__core,
    .el-switch .el-switch__label {
        width: 66px !important;    /*开关按钮的宽度大小*/

    }
</style>